<template>
	<view style="background-color: #fff;	padding-bottom: 45rpx;">

		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<block slot="backText"></block>
			<block slot="content">我要赚钱</block>
		</cu-custom>
		<view class="search-all-wrap"
			style="background: #FFFFFF; padding-top: 5rpx;padding-bottom: 10rpx;display:flex;justify-content: flex-start;">
			<view class="search-wrap" style="width: 80%;">
				<image class="search_home" src="/static/search.png"></image>
				<input class="uni-input" @input="onInput" confirm-type="search" placeholder=" 搜索岗位"
					placeholder-style="color:#C7C7C7;" style="width: 70%;" />
			</view>
			<view class="search-wrap-right">搜索</view>
		</view>
		<view class="content">
			<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected'
				border='true'>
			</ren-dropdown-filter>
		</view>

		<view class="all_jobs">
			<view class="jobs_item" v-for="(item, index) in jobs_list" :key="index"
				@click="viewNewsInfo(item.zhaopindataId)">
				<view>
					<view class="item_name_line">
						<view class="item_name">
							<text
								style="color: #000000;font-weight: bold;font-size: 30rpx;">{{item.zhaopindataGangwei}}</text>
						</view>
						<view class="clear"></view>
						<view class="item_wage">{{item.zhaopindataXinzi | filterXinzi }}</view>
					</view>
					<view class="item_name_line">
						<view class="item_name">
							<text style="color: #555;font-size: 28rpx;">{{item.zhaopindataQiye}}</text>
						</view>
					</view>
					<view class="item_name_line">
						<view class="item_name">
							<text style="color: #555;font-size: 22rpx;"
								class="item_span">{{item.zhaopindataJingyan | filterJingyan}}</text>
							<text style="color: #555;font-size: 22rpx;"
								class="item_span">{{item.zhaopindataXueli | filterXueli}}</text>
						</view>
					</view>
					<view class="item_some_line">

						<view class="item_some">{{item.zhaopindataDiqu.replace(/,/g, ' ')}}</view>
						<!-- <view class="item_some">{{item.zhaopindataDiqu | filterDiqu)}}</view> -->
						<view class="item_date">
							<uni-dateformat :date="item.zhaopindataTime" format="yyyy-MM-dd"></uni-dateformat>
						</view>
					</view>
				</view>
				<view class="split_line"></view>
				<view class="item_company_line">
					<view class="company_name">
						<text style="color: #F9BB69;font-size: 25rpx;">{{item.zhaopindataBeiyong2}}</text>
					</view>
					<view class="clear"></view>
				</view>
			</view>
		</view>

		<view class="share-view">
			<button @click="backInfoByLly" style="background: #3694EF;width: 60%;color: #fff;">
				<view class="loginThreeHide uni-tag-text--primary font-sm loginThreeShow share">
					<image class="share-icon" src="/static/share_button.png" mode=""></image>
					<text class="share-icon-text font-sm">分享返利信息</text>
				</view>
			</button>
		</view>

			
	</view>
</template>
<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import uniGrid from '@/components/uni-ui/uni-grid/uni-grid/uni-grid.vue';
	import uniGridItem from '@/components/uni-ui/uni-grid/uni-grid-item/uni-grid-item.vue';
	import uniDateformat from '@/components/uni-ui/uni-dateformat/uni-dateformat.vue';
	const app = getApp();
	export default {
		components: {
			RenDropdownFilter,
			uniGrid,
			uniGridItem,
			uniDateformat
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				filterData: [
					[{
							text: '区域',
							value: '-1'
						}, {
							text: '西宁',
							value: 0
						}, {
							text: '海东',
							value: 1
						}, {
							text: '海西',
							value: 2
						},
						{
							text: '海南',
							value: 3
						}, {
							text: '海北',
							value: 4
						}, {
							text: '黄南',
							value: 5
						}, {
							text: '果洛',
							value: 6
						},
						{
							text: '玉树',
							value: 7
						},
					],
					[{
							text: '薪资',
							value: ''
						}, {
							text: '面议',
							value: 0
						}, {
							text: '1000~1500/月',
							value: 1
						},
						{
							text: '1500~2000/月',
							value: 2
						},
						{
							text: '2000~3000/月',
							value: 3
						}, {
							text: '3000~5000/月',
							value: 4
						}, {
							text: '5000以上/月',
							value: 5
						},
					],
					[{
							text: '经验',
							value: ''
						}, {
							text: '无经验',
							value: 0
						}, {
							text: '1年以下',
							value: 1
						},
						{
							text: '1~3年',
							value: 2
						}, {
							text: '3~5年',
							value: 3
						}, {
							text: '5年以上 ',
							value: 4
						},
					],
					[{
							text: '学历',
							value: ''
						}, {
							text: '初中',
							value: 0
						}, {
							text: '高中',
							value: 1
						},
						{
							text: '中技/中专',
							value: 2
						}, {
							text: '大专',
							value: 3
						}, {
							text: '本科',
							value: 4
						},
						{
							text: '硕士',
							value: 5
						},
					]
				],
				defaultIndex: [0, 0, 0, 0], // 默认选中条件索引

				jobs_list: [],
				quyuSelect: "",
				xinziSelect: "",
				jingyanSelect: "",
				xueliSelect: "",
				gangweiSelect: "",
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			// 跳转分享返利理解
			backInfoByLly() {
				uni.navigateTo({
					url: './news-backinfo-lly',
				});
			},
			//获取数据
			getData() {
				uni.request({
					url: app.globalData.serve_job_url + 'zhaopinList',
					data: {
						"zhaopindataDiqu": this.quyuSelect,
						"zhaopindataXinzi": this.xinziSelect,
						"zhaopindataJingyan": this.jingyanSelect,
						"zhaopindataXueli": this.xueliSelect,
						"zhaopindataGangwei": this.gangweiSelect
					},
					success: res => {
						this.jobs_list = res.data.rows;
					}
				});
			},
			// 搜索框查询
			onInput(e) {
				this.gangweiSelect = e.detail.value;
				this.getData();
			},
			quyuByIndex(index) {
				let quyu = this.filterData[0];
				for (var i = 0; i < quyu.length; i++) {
					let item = quyu[i];
					if (item.value == index) {
						return item.text;
					}
				}
			},
			// 筛选条件
			onSelected(res) {
				if ((res[0])[0].value == -1) {
					this.quyuSelect = '';
				} else {
					this.quyuSelect = this.quyuByIndex((res[0])[0].value);
				}
				this.xinziSelect = (res[1])[0].value;
				this.jingyanSelect = (res[2])[0].value;
				this.xueliSelect = (res[3])[0].value;
				this.getData();
			},
			// 查看岗位详情
			viewNewsInfo(zhaopindataId) {
				app.globalData.zhaopindata_id = zhaopindataId;
				uni.navigateTo({
					url: '../news_detail/news_detailcopy?zhaopindata_id=' + zhaopindataId,
				});
			},
		},
		filters: {
			filterDiqu(str) {
				return str.split(",").join(" ")
			},
			filterXinzi(type) {
				switch (type) {
					case '0':
						return '面议'
						break;
					case '1':
						return '1000~1500/月'
						break;
					case '2':
						return '1500~2000/月'
						break;
					case '3':
						return '2000~3000/月'
						break;
					case '4':
						return '3000~5000/月'
						break;
					case '5':
						return '5000以上/月'
						break;
				}
			},
			filterJingyan(type) {
				switch (type) {
					case '0':
						return '无经验'
						break;
					case '1':
						return '1年以下'
						break;
					case '2':
						return '1~3年'
						break;
					case '3':
						return '3~5年'
						break;
					case '4':
						return '5年以上'
						break;
				}
			},
			filterXueli(type) {
				switch (type) {
					case '0':
						return '初中'
						break;
					case '1':
						return '高中'
						break;
					case '2':
						return '中技/中专'
						break;
					case '3':
						return '大专'
						break;
					case '4':
						return '本科'
						break;
					case '5':
						return '硕士'
						break;
				}
			}
		}
	}
</script>

<style>
	@import url("/static/css/search/search.css");
	Page{
		/* padding-top: env(safe-area-inset-top); */
	}
	.search-all-wrap {
		display: flex;
		align-items: center;
	}

	.search-wrap {
		width: 75%;
		height: 100%;
		line-height: 85rpx;
		border-radius: 15rpx;
		/* margin-left: 20rpx; */
		margin: 0 5%;
		padding-left: 20rpx;
		background-color: #F5F5F5;
	}

	.search-wrap text,
	.search-wrap input {
		float: left;
		background-color: #F1F2F6;
		height: 100%;
		padding: 0;
	}

	.search-wrap text {
		margin-right: 25rpx;
		color: #C7C7C7;
	}

	.search-wrap input {
		width: 70%;
		padding-left: 15rpx;
	}

	.search-wrap-right {
		width: 40px;
		color: rgb(76, 150, 234);
	}


	/* 大班课/内容列表公共样式 */
	@import url("/static/css/search/search.css");

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.content {
		height: 95rpx;
	}

	.content .navs {
		color: #000 !important;
	}

	.content .navs .c-flex-align {
		justify-content: center !important;
	}

	.all_jobs {
		width: 100%;
		/* margin-bottom: 80rpx; */
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
		padding-top: 18rpx;
		background-color: #F6F6F6;
	}

	.jobs_item {
		position: relative;
		width: auto;
		background: #FFFFFF;
		margin: 0 18rpx;
		margin-top: 18rpx;
		padding: 20rpx 35rpx 8rpx 35rpx;
	}

	.all_jobs .jobs_item .item_name_line {
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
	}

	.all_jobs .jobs_item .item_name_line .item_name {
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #000000;
		font-size: 33rpx;
		width: 75%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item_span {
		background-color: #f6f6f6;
		padding: 10rpx 15rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
	}

	.all_jobs .jobs_item .item_name_line .item_wage {
		position: absolute;
		right: 2rpx;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		color: #3694EF;
		line-height: normal;
		font-size: 25rpx;
	}

	.all_jobs .jobs_item .item_name_line .clear {
		clear: both;
		height: 0;
		font-size: 0;
		line-height: 0;
	}

	.all_jobs .jobs_item .item_some_line {
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
		margin-bottom: 10rpx;
	}

	.all_jobs .jobs_item .item_some_line .item_some {
		height: 45rpx;
		line-height: 45rpx;
		color: #666666;
		font-size: 27rpx;
	}

	.all_jobs .jobs_item .item_some_line .item_date {
		position: absolute;
		right: 2rpx;
		top: 0;
		height: 45rpx;
		line-height: 45rpx;
		color: #999999;
		font-size: 23rpx;
	}

	.all_jobs .jobs_item .split_line {
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
	}

	.all_jobs .jobs_item .item_company_line {
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
		margin-top: 15rpx;
	}

	.all_jobs .jobs_item .item_company_line .company_name {
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #666666;
		font-size: 27rpx;
	}

	.share-view {
		box-shadow: 0px -15rpx 20rpx -10rpx #f4f4f4;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		background-color: #FFFFFF;
		/* height: 130rpx; */
		height: calc(env(safe-area-inset-bottom) + 80rpx);
	}

	.share {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		padding: 15rpx 0;
		font-size: 28rpx;
	}

	.share image {
		height: 20rpx;
		width: 30rpx;
		margin-right: 30rpx;
	}
</style>